<template>
  <div id="add-blog">
    <!--    <img src="../assets/add-blog-logo2.png">-->

    <el-form ref="blog" :model="blog" label-width="80px" v-if="!submmited">
      <el-form-item label="博客标题">
        <el-input v-model="blog.blogTitle"></el-input>
      </el-form-item>
      <el-form-item label="博客内容">
        <!--        <el-input type="textarea" v-model="blog.content"></el-input>-->
        <mavon-editor
          class="mavonEditor"
          ref=md
          :ishljs="true"
          :toolbars="toolbars"
          @imgAdd="$imgAdd"
          v-model="blog.blogContent"
          v-on:paste="handlePaste"
        ></mavon-editor>
      </el-form-item>
      <!--      <el-form-item label="博客摘要">-->
      <!--        <el-input-->
      <!--          type="textarea"-->
      <!--          placeholder="请输入内容"-->
      <!--          v-model="blog.abstract"-->
      <!--          maxlength="100"-->
      <!--          show-word-limit-->
      <!--        >-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="博客分类">
        <el-checkbox-group v-model="blog.blogType">
          <el-checkbox label="Vue.js" name="type"></el-checkbox>
          <el-checkbox label="Node.js" name="type"></el-checkbox>
          <el-checkbox label="React.js" name="type"></el-checkbox>
          <el-checkbox label="Angular4" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否发布">
        <el-select v-model="blog.releaseOrNot" placeholder="请选择">
          <el-option label="发布" value="1"></el-option>
          <el-option label="不发布" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="post">添加</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>

    <div class="preview" v-if="submmited">
      <h3><i class="el-icon-s-flag"/> 博客总览</h3>
      <p><i class="el-icon-s-unfold"/> 博客标题：{{blog.blogTitle}}</p>
      <!--      <p><i class="el-icon-user-solid"/> 作者：{{blog.author}}</p>-->
      <p><i class="el-icon-s-order"/> 博客内容：</p>
      <mavon-editor
        class="md"
        :value="blog.blogContent"
        :subfield="prop.subfield"
        :defaultOpen="prop.defaultOpen"
        :toolbarsFlag="prop.toolbarsFlag"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle"
        :boxShadow="prop.boxShadow"
      ></mavon-editor>
      <!--      <p><i class="el-icon-s-opportunity"/> 博客摘要：{{blog.abstract}}</p>-->
      <p><i class="el-icon-s-open"/> 博客分类：
        <el-tag
          v-for="tag in blog.blogType"
          :key="tag"
          :type="success">
          {{tag}}
        </el-tag>
      </p>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'add-blog',
    data() {
      return {
        blog: {
          // 从页面中输入的值
          blogTitle: '',
          blogContent: '',
          blogType: '',
          // author: '',
          releaseOrNot: 0
        },
        submmited: false,
        // markdown
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          mark: true, // 标记
          superscript: true, // 上角标
          quote: true, // 引用
          ol: true, // 有序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          help: true, // 帮助
          code: true, // code
          subfield: true, // 是否需要分栏
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          undo: true, // 上一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          navigation: true // 导航目录
        }

      }
    },
    methods: {
      post: function () {
        // this.$http.post('http://localhost:3000/blogs', {
        //   title: this.blog.title, // post请求传的参数1
        //   content: this.blog.content, // post请求传的参数2
        //   categories: this.blog.categories,
        //   author: this.blog.author,
        //   abstract: this.blog.abstract
        // }).then(function (data) {
        //   console.log(data)
        //   this.submmited = true
        //   // 添加成功后的提示
        //   this.open2()
        // })
        let _this = this;
        let blog = {
          "blogTitle": _this.blog.blogTitle,
          "blogContent": _this.blog.blogContent,
          "blogType":_this.blog.blogType,
          "releaseOrNot":_this.blog.releaseOrNot
        }
        let postData = this.$qs.stringify(blog)
        this.$axios({
          url: "/blog",
          method: "post",
          data: postData
        }).then(function (data) {
          console.log(data);
          _this.submmited = true
          // 添加成功后的提示
          _this.open2()
        }).catch(function (error) {
          console.error(error)
        })
      },

      goBack() {
        // console.log('go back');
        // 跳转到上一页面
        this.$router.go(-1)
      },
      open2() {
        this.$message({
          message: '添加博客成功',
          type: 'success'
        });
      },
      // 绑定@imgAdd event
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('imgFile', $file);
        this.$axios({
          url: '/giteeBlogImg',
          method: 'post',
          data: formdata,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((url) => {
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // $vm.$img2Url 详情见本页末尾
          console.log(url)
          this.$refs.md.$img2Url(pos, url.data.msg);
        })
      },
      // 监听粘贴操作
      handlePaste(event) {
        const items = (event.clipboardData || window.clipboardData).items;
        let file = null;

        if (!items || items.length === 0) {
          this.$message.error("当前浏览器不支持本地");
          return;
        }
        // 搜索剪切板items
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.indexOf("image") !== -1) {
            file = items[i].getAsFile();
            break;
          }
        }
        if (!file) {
          this.$message.error("粘贴内容非图片");
          return;
        }
        // 此时file就是我们的剪切板中的图片对象
        // 如果需要预览，可以执行下面代码
        // const reader = new FileReader();
        // reader.onload = event => {
        //   preview.innerHTML = `<img src="${event.target.result}">`;
        // };
        // reader.readAsDataURL(file);
        this.$imgAdd(file);
      }
    },
    computed: {
      prop() {
        let data = {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
          editable: false,
          toolbarsFlag: false,
          scrollStyle: false,
          boxShadow: false//边框
        }
        return data
      }
    }

  }
</script>

<style scoped>
  div#add-blog {
    /*text-align: center;*/
    width: 80%;
    height: 100%;
    padding: 20px;
    margin: 10px auto;
    box-sizing: border-box;
    background: #eee;
  }

  div.preview {
    border: #42b983 1px;
    margin: auto auto 10px;
    text-align: left;
    width: 80%;
    height: 80%;
  }

  img {
    margin-left: auto;
  }

</style>
